<template>
  <div>
      <div class="box">
          <p class="title">pppppppppppp</p>
          <div class="demo">ddddddddddddd</div>
          <button  type="text" @click="dialogVisible">点击弹出</button>
          <dialog  width="30%" :before-close="handleClose"></dialog>
      </div>
      <!-- sass css的预处理语言 有着比css 更简洁的语法 -->
      <!-- sass 有两钟  sass  scss 他们两个拥有不停的写法但是都是一个插件 -->
      <!-- 日常使用 scss 居多 -->
  </div>
</template>

<script>
export default {
    data(){
        return{
            dialogVisible: false
        }
    },
    // methods: {
    //   handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   }
    // }

}
</script>

<style lang="scss">
@import "./two.css";
@import "./one.scss";
// 引入外部文件




$my-one:#0099ff;
// 还可以定义变量


.box{
    width: 600px;
    height: 600px;
    background-color: $my-one;
    p{
        background-color: blue;
        &:hover{
            // & 代表当前标签
            background-color: pink;
        }
    }
}

</style>